{% extends "base.html" %}

{% block title %}舆情事件分析{% endblock %}

{% block breadcrumb %}舆情事件分析{% endblock %}

{% block extra_css %}
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
{% endblock %}

{% block content %}
<!-- 事件列表 -->
<div class="event-list">
    <div class="event-card">
        <div class="event-header">
            <h3>重大舆情事件标题</h3>
            <span class="tag tag-warning">进行中</span>
        </div>
        <div class="event-metrics">
            <div class="metric">
                <span class="label">相关文章</span>
                <span class="value">1,234</span>
            </div>
            <div class="metric">
                <span class="label">影响人群</span>
                <span class="value">12.5万</span>
            </div>
            <div class="metric">
                <span class="label">负面占比</span>
                <span class="value">45%</span>
            </div>
        </div>
        <div class="event-trend">
            <div id="eventTrend1" style="height: 100px;"></div>
        </div>
        <div class="event-footer">
            <button class="btn-primary" onclick="showEventDetail()">详细分析</button>
            <button class="btn-text">导出报告</button>
        </div>
    </div>
</div>

<!-- 事件详情弹窗 -->
<div id="eventDetailModal" class="modal">
    <div class="modal-content wide">
        <div class="modal-header">
            <h3>事件详细分析</h3>
            <button class="btn-icon" onclick="closeModal()">
                <i class="material-icons">close</i>
            </button>
        </div>
        <div class="modal-body">
            <!-- 事件发展时间线 -->
            <div class="timeline">
                <!-- 时间线内容 -->
            </div>

            <!-- 传播分析 -->
            <div class="analysis-section">
                <h4>传播分析</h4>
                <div id="spreadAnalysis" style="height: 300px;"></div>
            </div>

            <!-- 情感分析 -->
            <div class="analysis-section">
                <h4>情感分析</h4>
                <div id="sentimentAnalysis" style="height: 300px;"></div>
            </div>

            <!-- 相关文章 -->
            <div class="analysis-section">
                <h4>相关文章</h4>
                <div class="article-list">
                    <!-- 文章列表 -->
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function showEventDetail() {
    document.getElementById('eventDetailModal').style.display = 'block';
}

function closeModal() {
    document.getElementById('eventDetailModal').style.display = 'none';
}

// 图表初始化代码
// ...
</script>
{% endblock %} 